<script setup lang="ts">
import Button from '@monorepo-demo/components'
import TestComponent from './components/TestComponent.vue'
import GlobalLoading from './components/GlobalLoading.vue'
import { useRouterLoading } from './router'

const { isLoading } = useRouterLoading()
console.log(isLoading.value);

</script>

<template>
  <div id="app">
    <!-- 全局loading组件 -->
    <GlobalLoading v-if="isLoading" />
    
    <nav>
      <router-link to="/" class="nav-link">首页</router-link>
      <router-link to="/about" class="nav-link">关于</router-link>
    </nav>
    
    <main>
      <router-view />
    </main>
    
    <footer>
      <Button />
      <TestComponent />
    </footer>
  </div>
</template>

<style scoped>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

nav {
  background-color: #f5f5f5;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.nav-link {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-link:hover,
.nav-link.router-link-active {
  background-color: #42b883;
  color: white;
}

main {
  flex: 1;
  padding: 2rem;
}

footer {
  background-color: #f5f5f5;
  padding: 1rem;
  text-align: center;
}
</style>
